<template>
   <div >
        <div v-for="(item,index) in RecommendArticle " :key="index"  class="ArticleOneBox flex"  @click="ToArticleDeatil(item.id)">
              <ArticleOne :item="item" class="ArticleOne flex" />
        </div>
        <div class="flex" id="Bottom">
               <div></div>
              <div v-if="RecommendArticleState==1">加载中  <i class="el-icon-loading"></i></div>
              <div v-if="RecommendArticleState==2">~~~ 到底了 ~~~</div>
        </div>
   </div>
</template>
<script>
import {mapState,mapActions, mapMutations} from 'vuex'
import ArticleOne from './ArticleOne/ArticleOne.vue'
  export default 
  {
  components: { ArticleOne },
     name :'',
     data() {
      return {
         timer:null
      }
     },
     computed:{
       ...mapState('Home',['RecommendArticle','RecommendArticleState'])  //文章信息 状态0:加载中 1:到底了
     },
     methods:{
       ...mapActions('Home',['GetRecommendArticle']),
      
       async init(){
           document.documentElement.scrollTop = 0
           
          if( this.RecommendArticle == null || this.RecommendArticle.length == 0 ) 
          {
             let res =await this.GetRecommendArticle()
             if(res.code !=200) this.$message.error(res.message)
          }
       },
       ToArticleDeatil(id){
         this.$router.push({path:'/articleDetail', query: { id} }, () => {})
       }

     },
     mounted(){
          this.init()
     },
  
  }
</script>
<style scoped lang='less'>
@keyframes fadeIn {
    from{
      width: 0;height: 0;
      opacity: 0;
    }
    to{
      width: 100%;height: 100%;
      opacity: 1;
    }
}
.ArticleOneBox{
   width: 90%;
   height: 300px;
   margin: 20px 0 ;
   border-radius: 15px;
   overflow: hidden;
   
   .ArticleOne{
      overflow: hidden;
      background: var(--Pattern);
      // opacity: 0.9;
      box-shadow: 0 0 10px black;
      overflow: hidden;
      border-radius: 15px;
      width: 100%;
      height: 100%;
      position: relative;

    
   }
}

#Bottom{
   margin: 30px;
   width: 100%;
   padding: 10px 0;
   color: white;
   font-size: 25px;
   font-weight: 600;

}
</style>